import React,{useState,useEffect} from 'react'
import {get_list} from '../api/index'
// import without from '../utils/without';
import { useNavigate } from 'react-router-dom';
import { Sidebar } from 'react-vant';
function Tabss(router) {
  console.log(router);
  const navigate=useNavigate()
    const [list,setList]=useState([])
    const [listChildren,setlistChildren]=useState([])
    const [active, setActive] = useState(2);
    useEffect(()=>{
      (async()=>{
        let {data}=await get_list()
        setList(data.list)
        setlistChildren(data.list[0].children)
      })()
    },[])
    const gotodetail=(val)=>{
        navigate(`/detail/${val.id}`,{state:val})
    }
  return (
    <div>
        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
            // console.log(v);
          }}
        >
          {
            list.map((item,index)=>{
              return <Sidebar.Item title={item.title} key={index}>
                  {
                    listChildren.map((val,i)=>{
                      return <div key={i} onClick={()=>gotodetail(val)}>
                        <img src={val.img}/>
                        <p>{val.word}</p>
                      </div>
                    })
                  }
              </Sidebar.Item>
            })
          }
          {/* <Sidebar.Item title="标签名1" />
          <Sidebar.Item title="标签名2" />
          <Sidebar.Item title="标签名3" /> */}
        </Sidebar>
    </div>
  )
}

export default Tabss